<template>
	<view class="">
		<!-- 弹出层 -->
		<uni-popup ref="popup" :mask-click="false" :animation="false" @maskClick="handleNaskClick()">
			<view class="popup_body">
				<view class="popup_top" @click="handleNaskClick()">
					<view class="popup_top_title">{{ title }}</view>
					<view class="popup_top_close" @click="close()">
						<i class="iconfont icon-shanchu"></i>
					</view>
				</view>
				<view class="popup_content"  @click="handleInClick()">
					<uni-loading v-if="loading"></uni-loading>
					<!-- 扫描中 -->
					<view class="popup_content_scaning" v-else-if="isWaitScan">
						<input v-model="orderNo" :focus="isFocus"@blur="blurTest"  :adjust-position="false" @confirm="onScanSuccess"
							placeholder="等待扫码中....." placeholder-class="popup_content_scaning_placeholder" @focus="focusTest"  />
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import UniLoading from "../../vBase/components/uni-loading/uni-loading.vue"
	export default {
		components: {
			UniLoading
		},
		props: {
			title: {
				type: String,
				default: ""
			},
			autoClose: {
				type: Boolean,
				default: true
			}

		},
		data() {
			return {
				loading: false,
				isWaitScan: true,
				isFocus: false,
				orderNo: null,
			}
		},
		methods: {

			/**
			 * 打开面板
			 */
			open() {
				// 初始化参数
				this.reset()
				this.orderNo = null
				this.$refs.popup.open('bottom')
				// #ifdef APP-PLUS
				// plus.key.addEventListener('keydown', event => {
				// 	this.isFocus = true
				// });
				// #endif
			},


			/**
			 * 重新扫码
			 */
			reset() {
				this.isWaitScan = true
				this.loading = false
				// this.isFocus = true
				this.orderNo = null
				this.isFocus = true;
				// #ifdef APP-PLUS
				plus.key.addEventListener('keydown', event => {
					this.isFocus = true
				});
				// #endif
				// setTimeout(() => {
				// 	this.inputShow = true
				// 	this.$nextTick(() => {
				// 		this.isFocus = true;
				// 	});
				
				// }, 300)
			},

			/**
			 * 关闭面板
			 */
			close() {
				this.$refs.popup.close()
				this.isFocus = false
			},
				
			focusTest(){
				console.log("获得交点")
			},
			blurTest(e){
				console.log('失去焦点')
				// console.log(this.isFocus)
				// this.$nextTick(() => {
				// 	this.isFocus = true;
				// });
				// console.log(this.isFocus)
			},
			/**
			 * 监听扫码结果
			 * @param e
			 */
			async onScanSuccess(e) {
				try {
					this.isWaitScan = false
					this.loading = true
					this.$emit("confirm", this.orderNo);
					// console.log(this.autoClose)
					// console.log('扫描结果')
					if (this.autoClose) {
						this.close()
					} 
				} finally{
					this.$nextTick(() => {
						this.reset()
					})
				}
			
				
			},
			
			/**
			 * 点击扫码框之外
			 */
			handleNaskClick() {
				console.log('点击扫码框之外')
				this.isWaitScan = true
				this.loading = false
				this.$nextTick(() => {
					this.isFocus = false
				})
			},
			/**
			 * 点击扫码框之内
			 */
			handleInClick() {
				console.log('点击扫码框之内')
				console.log(this.isFocus)
			
				this.isFocus = true
				
				console.log(this.isFocus)
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import "../../static/css/common";

	.popup_body {
		height: 300px;
	}

	.barnCenter {
		font-size: 22px;
		font-weight: bold;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0, -50%);
		text-align: center;
		width: 100%;
	}
</style>
